<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
</head>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
	$("#btn1").click(function(){     
        
	    $("[name='checkbox']").prop("checked", true);//全选     
	       
	    });
	
	   $("#btn2").click(function(){     
	          
		    $("[name='checkbox']").prop("checked", false);//取消全选     
		       
		});  
	   
	   $("#btn4").click(function(){     
	          
		    $("[name='checkbox']").each(function(){     
		          
		        
		    	$(this).prop("checked", !$(this).prop("checked"));    
		        
		    });     
		       
		    }); 
	   
	   $("#btn5").click(function(){     
		   	/* var arr = new Array();    
		    $("[name='checkbox'][checked]").each(function(i){     
		    	  arr[i] = $(this).val();   
		   		console.log(arr[i]);    
		    });     
		    var vals = arr.join(",");
            console.log(vals);  */
            
            var sTemp="";
            $('input:checkbox[name=checkbox]:checked').each(function(i){
            	if(0==i){
            		sTemp=$(this).val();
            	}else{
            		sTemp+=(","+$(this).val());
            	}
            });
            console.log(sTemp);
		    });     
		   
});

	function checkboxOnclick(checkbox){
		
			var sTemp="";
            $('input:checkbox[name=checkbox]:checked').each(function(i){
            	if(0==i){
            		sTemp=$(this).val();
            	}else{
            		sTemp+=(","+$(this).val());
            	}
            });
            console.log(sTemp);
            $("#text").val(sTemp);
		
};
</script>
<body>
	This is my JSP page.
	<br>
	<form name="form1" method="post" action="">
		<input type="button" id="btn1" value="全选"> 
		<input type="button" id="btn2" value="取消全选"> 
		<!-- <input type="button" id="btn3" value="选中所有奇数"> -->
		<input type="button" id="btn4" value="反选"> 
		<input type="button" id="btn5" value="获得选中的所有值">
		<br> 
		<input type="checkbox" name="checkbox" value="checkbox1" onclick="checkboxOnclick(this)" >checkbox1 <br> 
		<input type="checkbox" name="checkbox" value="checkbox2" onclick="checkboxOnclick(this)" >checkbox2 <br> 
		<input type="checkbox" name="checkbox" value="checkbox3" onclick="checkboxOnclick(this)" >checkbox3 <br> 
		<input type="checkbox" name="checkbox" value="checkbox4" onclick="checkboxOnclick(this)" >checkbox4 <br> 
		<input type="checkbox" name="checkbox" value="checkbox5" onclick="checkboxOnclick(this)" >checkbox5 <br> 
		<input type="checkbox" name="checkbox" value="checkbox6" onclick="checkboxOnclick(this)" >checkbox6 <br> 
		<input type="checkbox" name="checkbox" value="checkbox7" onclick="checkboxOnclick(this)" >checkbox7 <br> 
		<input type="checkbox" name="checkbox" value="checkbox8" onclick="checkboxOnclick(this)" >checkbox8 <br> 
	</form>
	
	<input type="text" id="text" value="空"  style="width:620px;">
</body>
</html>
